<template>
  <div>
    <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%"
              :row-class-name="tableRowClassName">
      <el-table-column
        type="index">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.date }}</div>
          <div v-else>
            <el-input v-model="scope.row.date"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.name }}</div>
          <div v-else>
            <el-input v-model="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="视频管理">
        <template slot-scope="scope">
          <div>
            <el-button type="danger" @click="openVideo" size="small" plain>危险按钮</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="按钮">
        <template slot="header" slot-scope="scope">
          <el-button type="danger" icon="el-icon-circle-plus-outline" @click="handleAdd" circle></el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleClick(scope.row)">{{ scope.row.isEdit ? '完成' : '编辑' }}</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <video-model :visible="ctrl.showVideo" :grid-data="ctrl.gridData" @close-callback="closeCllback"></video-model>
  </div>
</template>

<script>
import VideoModel from "@/components/account/VideoModel";
export default {
  name: "CourseHourse",
  components: {VideoModel},
  comments:{VideoModel},
  data() {
    return {
      tableData: [{
        id:1,
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id:2,
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:3,
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:4,
        date: '2016-05-03',
        name: '王小虎4',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      ctrl: {
        showVideo: false,
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      },
    }
  },
  methods: {
    handleClick(row) {
      // 动态设置数据并通过这个数据判断显示方式
      if (row.isEdit) {
        this.$delete(row, 'isEdit')
      } else {
        this.$set(row, 'isEdit', true);
      }
      console.log(row.index);
      console.log(this.tableData)
    },
    handleAdd() {
      this.tableData.push({
        id:100,
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄',
      });
    },
    handle(row, column, cell, event) {
    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    openVideo(){
      this.ctrl.showVideo = true;
    },
    // 关闭弹窗回调
    closeCllback() {
      this.ctrl.showVideo = false;
    },
  }
}
</script>

<style scoped>
>>> .el-input {
  width: 100%;
}
</style>
